<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script> 
		<script>

		function annotationOverlaping(){
			this.annots = [];
			this.tracks = new Array();
			this.tracks.push(new Array());
		}

		annotationOverlaping.prototype.setAnnot = function(annotArrayArray){
			this.annots = annotArrayArray;
		}

		annotationOverlaping.prototype.run = function(){
			var trackNumber = 0;
			var annot = new Array();
			annots: for (var j = 0; j < this.annots.length; j++) {
				annot = this.getRoundAnnotation(this.annots[j]);
				var message = annotationOverlaping.prototype.checkAnnotation(annot);
				if (message.length == 0) {
					trackNumber = this.sortAnnotInOneTrack(annot);
					//Here we could draw anotations per track. Otherwise we could gather the track Array at the end of the run function.
				} else {
					console.log("Array element " + j + "; " + message);
				}
			}
		}
		
		annotationOverlaping.prototype.getRoundAnnotation = function(annotArray){
			var newAnnotArray = new Array();
			newAnnotArray[0] = Math.round(annotArray[0]);
			newAnnotArray[1] = Math.round(annotArray[1]);
			return newAnnotArray;
		}
		
		annotationOverlaping.prototype.sortAnnotInOneTrack = function(annot){
			var overlaping = false;
			var trackNumber = 0;
			tracks:
			for (var i = 0; i < this.tracks.length; i++) {
				overlaping = this.isOverlaping(annot, this.tracks[i]);
				if (overlaping == false) {
					this.tracks[i].push(annot);
					trackNumber = i;
					break tracks;
				} else {
					if (YAHOO.lang.isUndefined(this.tracks[i + 1])) {
						this.tracks.push(new Array());
					}
				}
			}
			return trackNumber;
		}
		
		annotationOverlaping.prototype.checkAnnotation = function(annot){
			var message = "";
			if(YAHOO.lang.isNumber(annot[0])==false || YAHOO.lang.isNumber(annot[1])==false){
				message = "Annotation start or end is not a number";
			} else if(annot[0] >= annot[1]){
				message = "Annotation start can not be higer or equal to annotation end";
			} else {
				message = "";
			}
			return message;
		}
		
		annotationOverlaping.prototype.isOverlaping = function(annot, track){
			var overlaping = false;
			//ANNOT INSIDE TRACKS (k)
			trackAnnot:
			for (var k = 0; k < track.length; k++) {
				// TRACK ANNOT START (0), TRACK ANNOT STOP (1)
				if (annot[0] < track[k][0] && annot[1] < track[k][0]) {
					overlaping = false;
				} else if (annot[0] >= track[k][1] && annot[1] > track[k][1]) {
					overlaping = false;
				} else {
					overlaping = true;
				}
			}
			return overlaping;
		}
		
		annotationOverlaping.prototype.getResultInFirebug = function(){
			for (var i = 0; i < this.tracks.length; i++) {
				console.log("track: " + i);
				for (var k = 0; k < this.tracks[i].length; k++) {
					console.log(this.tracks[i][k][0] + " " + this.tracks[i][k][1]);
				}
			}
		}
		
		var aOverlaping = new annotationOverlaping();
		aOverlaping.setAnnot([[0, 4], [3, 6], [6, 8], [5, 10], [16, 17], [9, 11], [9, 10]]);
		aOverlaping.run();
		aOverlaping.getResultInFirebug();
		</script>
	</head>
	
	<body>
	Example of how to organize annotations in different tracks taking into account start and end coordinates in Pixels. Have a look to firebug to see the sorting result. Mdify the aOverlaping objet at the end of the script to run a different set of annotations.
	</body>
</html>
